<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>用户列表</title>
	<link rel="stylesheet" href="layui/css/layui.css">
	<link rel="stylesheet" href="layui/css/global.css">
	<link rel="stylesheet" href="css/admin.css">
	<script src="layui/layui.js"></script>
</head>

<body>

	<!-- 1.条件查询表单开始 -->
	<form class="layui-form">
		<div class="layui-inline">
			<label class="layui-form-label">查询条件</label>
			<div class="layui-input-block">
				<input type="text" name="username" id="username" style="width: 400px;" placeholder="用户名"
					autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-inline">
			<select name="level" id="level" lay-filter="level" lay-search="">
				<option value="">选择角色</option>
			</select>
		</div>

		<div class="layui-inline">
			<input type="button" id="selectBtn" class="layui-btn" data-type="reload" value="查询">
		</div>
		<div class="layui-inline">
			<input type="button" id="addBtn" class="layui-btn" value="添加">
		</div>
	</form>
	<!-- 条件查询表单结束 -->




	<!-- 2.数据表格 -->
	<table border="1" width="80%" align="center" class="layui-table" id="table" lay-filter="table">
	</table>




	<!-- 3.表格工具条 -->
	<!-- lay-event:自定义layui事件 -->
	<script type="text/text" id="optionBar">
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show">修改</a>
		<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">详细</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="jinyong">禁用</a>
	</script>

	<!-- 自定义弹出层 -->
	<!-- 4.修改表单开始 -->
	<div id="updateContainer" style="display: none">
		<form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

			<div class="layui-form-item">
				<label class="layui-form-label">帐号</label>
				<div class="layui-input-block">
					<input type="text" id="update-username" name="username" autocomplete="off" class="layui-input"
						readonly />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" id="update-sex1" name="sex" value="男" title="男" checked>
					<input type="radio" id="update-sex2" name="sex" value="女" title="女">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">电话</label>
				<div class="layui-input-block">
					<input type="text" id="update-phone" name="phone" autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">地址</label>
				<div class="layui-input-block">
					<input type="text" id="update-address" name="address" autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">邮编</label>
				<div class="layui-input-block">
					<input type="text" id="update-zipcode" name="zipcode" autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">角色</label>
				<div class="layui-input-block">
					<select name="level" id="update-level" lay-filter="level" lay-search="">
						<option value="">请选择角色</option>
					</select>
				</div>
			</div>

			<!-- 隐藏域 -->
			<input type="hidden" name="id" value="" id="update-id">
		</form>
	</div>
	<!-- 修改表单结束 -->



	<!-- 4.添加表单开始 -->
	<div id="addContainer" style="display: none">
		<form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">

			<div class="layui-form-item">
				<label class="layui-form-label">帐号</label>
				<div class="layui-input-block">
					<input type="text" id="add-username" name="username" autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">密码</label>
				<div class="layui-input-block">
					<input type="text" id="add-password" name="password" autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">手机</label>
				<div class="layui-input-block">
					<input type="text" id="add-phone" name="phone" autocomplete="off" class="layui-input" />
				</div>
			</div>
		</form>
	</div>
	<!-- 添加表单结束 -->

	<script>

		// 加载layui相关的模块
		layui.use(['jquery', 'table', 'layer', 'form'], function () {

			// 1.获取各个模块的实例
			var $ = layui.jquery;
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;

			// 2.加载用户角色（非必须）
			$.ajax({
				url: 'http://localhost:9999/layui/api/user/level',
				type: 'get',
				beforeSend: function (xhr) {
					let token = localStorage.getItem("token");
					// 使用请求头的方式传递
					xhr.setRequestHeader("Authorization", "Bearer " + token)
				},
				success: function (res) {
					// 没有权限，则返回登录页面
					if (res.code == 401) {
						location.href = "index.html";
						return;
					}

					// 循环遍历角色，并回显到页面中下拉列表框中
					if (res.code == 200) {
						$.each(res.data, function (index, level) {
							// 搜索表单初始化数据
							$('#level').append('<option value="' + level + '">' + level + '</option>');

							// 修改表单初始化数据
							$('#update-level').append('<option value="' + level + '">' + level + '</option>');
						});

						// 重新渲染
						form.render('select');
					}
				}
			});


			// 3.动态加载表格数据
			table.render({
				// 绑定table节点
				elem: '#table'
				// 命名table，便于后期调用
				, id: 'tableReload'
				// 定义请求头
				, headers: {
					Authorization: "Bearer " + localStorage.getItem("token")
				}
				// 定义请求URL
				, url: 'http://localhost:9999/layui/api/user/list'
				// 定义标题
				, title: '用户列表'
				// 定义表格各个列
				// field:字段名称，必须与响应的实体对象的属性同名
				// title:列名
				// width:指定列的宽度
				// templet:控制数据显示的格式 
				// toolbar：指定工具条 -> 通过script定义工具条
				, cols: [[
					{ field: 'username', title: '帐号', width: '15%' }
					, { field: 'name', title: '姓名', width: '12%',templet:function(res){
						if(res.name==undefined || res.name=='') {
							return '-' ;
						} else {
							return res.name ;
						}
					} }
					, { field: 'sex', title: '性别', width: '8%' }
					, { field: 'level', title: '角色', width: '10%' }
					, {
						field: 'registerTime', title: '注册时间', width: '12%', templet: function (res) {
							return layui.util.toDateString(res.registerTime, 'yyyy-MM-dd');
						}
					}
					, {
						field: 'status', title: '状态', width: '10%', templet: function (res) {
							if (res.status == 1) {
								return '正常';
							} else {
								return '<span style="color:red">禁用</span>';
							}
						}
					}
					, { fixed: 'right', title: '操作', toolbar: '#optionBar' }
				]]
				// 开启分页
				, page: true
				// 设置每页显示的记录数
				, limit: 2
				, limits: [2, 4, 10]
				// 设置响应数据的格式  -- 解决API接口响应数据与Layui要求的数据格式不一致
				// , parseData: function (res) {
				// 	console.log("page>>>", res);
				// 	return {
				// 		"code": res.code == 200 ? 0 : res.code, 	// 解析接口状态
				// 		"msg": res.msg, 							// 解析提示文本
				// 		"count": res.count, 						// 解析数据长度
				// 		"data": res.data 							// 解析数据列表
				// 	};
				// }
			});


			// 4.查询并重新加载表格active.reload === active[reload]
			let active = {

				reload: function () {
					// 执行重载
					table.reload('tableReload', {
						// 指定当前页
						page: {
							curr: 1 // 重新从第 1 页开始
						}
						// 指定查询条件
						, where: {
							username: $('#username').val(),
							level: $('#level').val()
						}
					});
				}
			};

			// 5.绑定查询按钮
			$('#selectBtn').on('click', function () {
				// 获取当前节点中的自定义属性 -- reload 
				let type = $(this).data('type');

				active[type] ? active[type].call(this) : '';
			});


			// 6.监听table行工具事件
			table.on('tool(table)', function (obj) {
				// 单击按钮所在行的数据 -- 当前行的数据
				let currentRow = obj.data;

				// 单击按钮中的自定义事件
				let layuiEvent = obj.event;

				// 删除数据
				if (layuiEvent === 'del') {

					// 弹出确认框，如果按了“确定”，则执行回调函数，如果按了“取消”，则默认确认框，什么也不做
					// index：确认框的索引，便于通过此索引关闭确认框
					layer.confirm('是否确认删除此条目？', function (index) {

						// 发起异步请求，删除数据
						$.ajax({
							url: 'http://localhost:9999/layui/api/user/del',
							type: 'GET',
							beforeSend: function (xhr) {
								xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem("token"))
							},
							data: { 'id': currentRow.id },
							success: function (data) {
								if (data.code == 200) {
									// 删除当前行
									// obj.del();

									// 重载表格数据
									table.reload('tableReload', { page: { curr: 1 } });
									// 关闭确认框
									layer.close(index);
								} else {
									layer.msg(data.msg);
								}
							}
						});
					});


				} else if (layuiEvent === 'show') {
					// 修改操作
					// 1.回显当前行的数据
					$("#update-username").val(currentRow.username);


					if (currentRow.sex == '男') {
						$("#update-sex1").prop("checked", true);
					} else {
						$("#update-sex2").prop("checked", true);
					}

					$('#update-phone').val(currentRow.phone);
					$('#update-address').val(currentRow.address);
					$('#update-zipcode').val(currentRow.zipCode);

					$('#update-level').find("option").each(function () {
						// 判断需要对那个选项进行回显
						if (this.value == currentRow.level) {
							// 进行回显
							$(this).prop("selected", "selected");

							// 重新渲染
							form.render('select');
						}
					});

					$("#update-id").val(currentRow.id);

					// 2.重新渲染表单
					form.render();


					// 3.弹出修改表单
					layer.open({
						// 类型
						type: 1,
						// 标题
						title: '修改',
						// 设置宽、高
						area: ['50%', '30em'],
						// 是否改变大小
						resize: false,
						// 指定弹出层的内容--上面必须定义好一个DIV
						content: $("#updateContainer"),
						// 定义弹出层的按钮
						btn: ['确认', '取消'],

						// btn1:响应弹出层的第一个按钮，依次类推，btn2,btn3...
						btn1: function (index) {

							// 4.验证数据的合法性
							if ($('#update-phone').val() == '') {
								layer.msg("手机不能为空");
								$('#update-phone').focus();
								return false;
							}

							// ...

							// 5.修改数据
							$.ajax({
								url: 'http://localhost:9999/layui/api/user/update',
								type: 'post',
								data: $('#updateForm').serialize(),
								dataType: 'json',
								beforeSend: function (xhr) {
									// 使用请求头的方式传递
									xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem("token"))
								},
								success: function (data) {
									if (data.code == 200) {
										// 重载表格
										table.reload('tableReload', { page: { curr: 1 } });

										// 关闭层
										layer.close(index);
									} else {
										layer.msg(data.msg);
									}
								}
							});
						}
					});

				}
			});


			// 7.添加用户
			$('#addBtn').on('click', function () {
				layer.open({
					// 类型
					type: 1,
					// 标题
					title: '添加',
					// 设置宽、高
					area: ['50%', '20em'],
					// 是否改变大小
					resize: false,
					// 指定弹出层的内容--上面必须定义好一个DIV
					content: $("#addContainer"),
					// 定义弹出层的按钮
					btn: ['确认', '取消'],

					// btn1:响应弹出层的第一个按钮，依次类推，btn2,btn3...
					btn1: function (index) {

						// 4.验证数据的合法性
						if ($('#add-username').val() == '') {
							layer.msg("用户不能为空");
							$('#add-username').focus();
							return false;
						}

						// ...

						// 5.修改数据
						$.ajax({
							url: 'http://localhost:9999/layui/api/user/add',
							type: 'post',
							data: $('#addForm').serialize(),
							dataType: 'json',
							beforeSend: function (xhr) {
								// 使用请求头的方式传递
								xhr.setRequestHeader("Authorization", "Bearer " + localStorage.getItem("token"))
							},
							success: function (res) {
								console.log(res);
								if (res.code == 200) {
									// 重载表格
									table.reload('tableReload', { page: { curr: 1 } });

									// 关闭层
									layer.close(index);
									
									// 提示
									layer.msg(res.msg)
								} else {
									layer.msg(res.msg);
								}
							}
						});
					}
				});

			});






		});
	</script>
</body>

</html>